<template>
  <div>
    <div
      v-show="xAxisData.length > 0"
      ref="chart"
      class="bar-chart"
      @mouseenter="handleMouseEnter"
      @mouseleave="handleMouseLeave"
    />

    <div v-if="xAxisData.length <= 0">
      <el-empty style="padding: 0" description="暂无评价数据" />
    </div>
  </div>

</template>
<script>
import * as echarts from 'echarts'
import { debounce } from '@/utils/index'
export default {
  name: '',
  props: {
    data: {
      type: Object,
      default: () => ({})
    },

    xAxisData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      chart: null,
      chartResizingWithDebounce: debounce(this.chartResizing, 200),
      showCount: 2,
      timer: null
    }
  },
  computed: {
    generateYAxisScale() {
      const oneMax = Math.max.apply(null, this.data?.good)
      const twoMax = Math.max.apply(null, this.data?.bad)
      const max = Math.max(oneMax, twoMax)
      const YAxis = {
        max,
        interval: 1
      }
      if (max <= 10) {
        YAxis.max = 10
        YAxis.interval = 2
      } else {
        YAxis.interval = 10
      }
      return YAxis
    },
    generateOptions() {
      var dataCount = this.data?.good.length
      var showCount = this.showCount // 每次展示的数据条数
      var endValue = (showCount / dataCount) * 100 // 计算end的百分比
      return {
        color: ['#67C23A', '#F56C6C'],
        legend: {
          data: ['好评', '差评'],
          type: 'plain',
          right: '2%',
          textStyle: {
            // color: '#2F88FF',
            fontSize: 14
          }
        },
        tooltip: {
          show: true,
          position: 'right',
          formatter: (params) => {
            return `${params?.name}${params?.seriesName}：${params?.value}次`
          },
          borderColor: '#fff',
          textStyle: {
            color: '#2F88FF',
            fontSize: 14
          }
        },
        xAxis: {
          type: 'category',
          data: this.xAxisData,
          axisLine: {
            lineStyle: {
              color: '#D8D8D8'
            }
          },
          axisLabel: {
            color: '#303133'
          },
          axisTick: {
            show: false
          }
        },

        yAxis: {
          name: '(人数)',
          type: 'value',
          interval: this.generateYAxisScale.interval,
          min: 0,
          max: this.generateYAxisScale.max,
          axisLabel: {
            color: '#303133',
            size: 14
          },
          axisLine: {
            lineStyle: {
              color: '#303133',
              size: 14
            }
          },
          splitLine: {
            lineStyle: {
              color: '#F5F5F6'
            }
          }
        },
        series: [
          {
            name: '好评',
            data: this.data.good,
            type: 'bar',
            barWidth: '21'
          },
          {
            name: '差评',
            data: this.data.bad,
            type: 'bar',
            barWidth: '21'
          }
        ],
        dataZoom: [
          {
            type: 'inside', // 内置型数据缩放组件，鼠标滚轮可操作
            xAxisIndex: [0, 0],
            start: 0,
            end: endValue,
            show: true,
            handleSize: '80%'
          }
        ]
      }
    }
  },
  watch: {
    data: function(data) {
      if (this.data.good && this.data.bad) {
        this.chart?.setOption?.(this.generateOptions)

        this.startScroll()
      }
    }
  },
  mounted() {
    // this.chart = echarts.init(this.$refs?.chart)
    this.chart = echarts.init(this.$refs?.chart, null, { renderer: 'svg' })
    this.chart.setOption(this.generateOptions)
    window.addEventListener('resize', this.chartResizingWithDebounce)

    this.startScroll()
  },

  methods: {
    chartResizing() {
      this.chart?.resize?.({
        animation: {
          duration: 1500,
          easing: 'elasticOut'
        }
      })
    },

    startScroll() {
      let currentIndex = 0
      const that = this
      this.timer = setInterval(function() {
        currentIndex += 1
        if (currentIndex * that.showCount >= that.data.good.length) {
          currentIndex = 0
        }
        that.chart.setOption({
          dataZoom: [
            {
              start: (currentIndex * that.showCount / that.data.good.length) * 100,
              end: ((currentIndex + 1) * that.showCount / that.data.good.length) * 100
            }
          ]
        })
      }, 2000)
    },

    stopScroll() {
      clearInterval(this.timer)
    },

    handleMouseEnter() {
      this.stopScroll()
    },

    handleMouseLeave() {
      this.startScroll()
    },

    refreshChart() {
      // this.stopScroll()
      this.chart.dispose()
      this.chart = echarts.init(this.$refs?.chart)
      this.chart?.setOption?.(this.generateOptions)

      this.startScroll()
    }
  }
}
</script>

<style lang="scss" scoped>

.bar-chart {
  width: 100%;
  height: 300px;

}

</style>
